<template>
  <view class="navigation">
    <view
      :class="{
        'm-navbar': true,
        'navbar-fixed': isFixed,
        'border-bottom': borderBottom,
      }"
    >
      <view
        class="u-status-bar"
        :style="{ height: globalStateHeight + 'px' }"
      ></view>
      <view class="nav-cn">
        <view class="nc-left">
          <view class="cabk" v-if="isCback" @click="goBack">
            <u-icon name="arrow-left" color="#fff" size="24"></u-icon>
          </view>
          <!-- v-if="isLeftText" -->
          <view class="address" @click="goMap" v-if="isLeftText">
            <view class="mapicon">
              <image
                :src="$utils.isBaseUrl('position.png')"
                mode="aspectFill"
              ></image>
            </view>
            <view class="place-name"> 环球数码大夏 </view>
            <view class="">
              <u-icon name="arrow-down-fill" color="#fff" size="10"></u-icon>
            </view>
          </view>
        </view>
        <view class="nc-centre"></view>
        <view class="nc-right"></view>
      </view>
    </view>
    <!-- 解决fixed定位后导航栏塌陷的问题 -->
    <view
      class="navbar-placeholder"
      v-if="isFixed"
      :style="{ width: '100%', height: navbarHeight }"
    ></view>
  </view>
</template>

<script>
export default {
  name: "navigation",
  data() {
    return {
      config2: "",
      globalStateHeight: "0",
    };
  },
  props: {
    // 返回箭头
    isCback: {
      type: Boolean,
      default: true,
    },
    // 是否悬浮
    isFixed: {
      type: Boolean,
      default: true,
    },
    // 是否显示下边框
    borderBottom: {
      type: Boolean,
      default: true,
    },
    //是否显示左边文字
    isLeftText: {
      type: Boolean,
      default: true,
    },
    start: {
      default: true,
    },

    isCustom: {
      default: false,
    },
  },
  watch: {},
  computed: {
    // 导航总高度
    navbarHeight() {
      return Number(uni.upx2px(88)) + this.globalStateHeight + "px";
    },
  },
  created() {
    this.globalStateHeight = uni.getSystemInfoSync().statusBarHeight;
  },

  methods: {
    // 返回
    goBack() {
      let page = getCurrentPages(); // 获取到小程序的页面栈
      // if (this.isCustom) {
      // 	this.$emit('customReturn')

      // }else{
      if (page.length == 1) {
        this.$uniApi.on("/pages/tabBar/index");
      } else {
        this.$uniApi.cback();
      }
      // }
    },
    // 去地图详情页
    goMap() {
      this.$uniApi.to("/pages/index/nearbyShop");
    },
  },
};
</script>

<style lang="scss">
.navigation {
  .navbar-fixed {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    top: 0;
  }

  .border-bottom {
    border-bottom: 1rpx solid #2354E3;
  }
  .m-navbar {
    width: 750rpx;
    z-index: 9999;
    background: #2354E3;
    .nav-cn {
      width: 100%;
      height: 88rpx;
      display: flex;
      align-items: center;

      .nc-left {
        display: flex;
        padding-left: 10rpx;
        // justify-content: space-between;
        align-items: center;

        .cabk {
          margin-right: 30rpx;
        }

        .address {
          display: flex;
          align-items: center;
          background-color: rgba(255, 255, 255, 0.1);
          border-radius: 40rpx;
          padding: 10rpx 20rpx;

          .mapicon {
            width: 38rpx;
            height: 44rpx;

            image {
              width: 100%;
              height: 100%;
            }
          }

          .place-name {
            font-size: 30rpx;
            font-weight: bold;
            color: #ffffff;
            margin: 0 20rpx;
          }
        }
      }
    }
  }
}
</style>
